<script setup>
import { ref, onMounted } from 'vue'
import Gallery from './components/Gallery.vue';
import RecordDay from './components/RecordDay.vue';

</script>

<template>
  <div class="flex-col justify-between bg-orange-50 h-screen">

    <div class="flex">
      <router-link to="/setting">
        <img
          class="ml-72 mt-3 w-5 h-5 "
          src="../../assets/user/settings-line.png"
        >
      </router-link>

    </div>

    <div class="flex items-center mt-3 px-5">
      <img
        class="w-10 h-10"
        src="../../assets/user/map-pin-user-line.png"
      >
      <h1 class="font-bold px-1">杨大师</h1>
    </div>

    <div class="flex items-center justify-around text-xs mt-5">
      <div class="flex-col font-serif font-light space-y-2">
        <div class="flex items-center justify-center">
          230
        </div>
        <div class="flex items-center justify-center">
          日记数量
        </div>
      </div>
      <div class="flex-col font-serif font-light space-y-2">
        <div class="flex items-center justify-center">
          223
        </div>
        <div class="flex items-center justify-center">
          记录天数
        </div>
      </div>
      <div class="flex-col  font-serif font-light space-y-2">
        <div class="flex items-center justify-center">
          9.2万
        </div>
        <div class="flex items-center justify-center">
          总字数
        </div>
      </div>
    </div>
    <!-- 连续记录天数 -->
    <div>
      <RecordDay></RecordDay>
    </div>
    <!-- 相册 -->
    <div class="mt-5 w-72 mx-auto ">
      <Gallery></Gallery>
    </div>

  </div>
</template>

<style scoped ></style>